<template>
    <div>
        <div class="add" @click="dialogVisible = true">
            +
            <img class="add-img" :src="imgurl">
        </div>
        <el-dialog
            title="素材管理"
            :visible.sync="dialogVisible"
            width="90%"
            >
            <div style="margin-bottom:20px">
                <el-radio-group v-model="collect" size="mini" @change="changeImageList">
                    <el-radio-button :label="false">全部</el-radio-button>
                    <el-radio-button :label="true">收藏</el-radio-button>
                </el-radio-group>
            </div>
            <el-row :gutter="10">
                <el-col 
                v-for="item in imageList"
                :key="item.id"
                class="img-item"
                :xs="12" :sm="6" :md="6" :lg="4">
                    <div class="img-box" @click="handleClickImg(item)">
                        <i class="el-icon-check" v-show="item.isSelected"></i>
                        <img :src="item.url">
                    </div>
                </el-col>
            </el-row>
            <div class="page">
                <el-pagination
                    background
                    @current-change="currentChange"
                    layout="prev, pager, next"
                    :current-page.sync="pageNum"
                    :total="total">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClickOk">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
<script>
import {getUserToken} from '@/store/index.js'
import {api_images} from '@/api/image.js'
export default {
    props:{
        imgurl:{
            type:String
        }
    },
    watch:{
        imgurl(val){
            console.log("######",val)
            console.log("this.imgurl=",this.imgurl)
        }
    },
    data(){
        return {
            dialogVisible:false,
            pageNum:1,
            total:20,
            per_page:10,
            imageList:[],
            collect:false,
            dialogVisible:false,
            headers:{
                Authorization: `Bearer ${getUserToken().token}`
            },
            currentImg:""
        }
    },
    methods:{
        handleClickOk(){
           
            this.imageList.forEach(element => {
                element.isSelected = false
            });
            this.$emit("update:imgurl",this.currentImg.url)
            this.dialogVisible = false
        },
        handleClickImg(item){
            item.isSelected = true
            this.currentImg = item
            this.imageList.forEach(element => {
                if(element != item){
                    element.isSelected = false
                }
            });
        },
        getImages(){
            let params = {
                collect:this.collect,
                page:this.pageNum,
                per_page:this.per_page
            }
            api_images(params).then(res=>{
                console.log(res);
                var data = res.data.data
                let tempList = data.results
                let targetList = tempList.map(item=>{
                    return {
                        ...item,
                        isSelected:false
                    }
                })
                this.imageList = targetList
                this.total = data.total_count
            })
        },
        currentChange(page){
            this.pageNum = page
            this.getImages();
        },
        changeImageList(){
            this.getImages();
        },
    },
    created(){
        this.getImages()
    }
}
</script>
<style lang="less" scoped>
.add{
    width: 100px;
    height: 70px;
    border: 1px solid #ccc;
    font-size: 24px;
    text-align: center;
    padding-top: 30px;
    position: relative;
    margin-bottom: 20px;
    margin-left: 50px;
}
.add-img{
    position: absolute;
    width:100px;
    left: 0;
    top: 0;
}
img-box{
    position: relative;
    width: 240px;
    height: 180px;
}
.img-box img{
    width: 240px;
    height: 180px;
}
.el-icon-star-off{
    margin-right: 20px;
}
.page{
    margin-top: 20px;
}
.img-item{
    position: relative;
    .option{
        position: absolute;
        background: #ccc;
        bottom: 0;
        width: 100%;

    }
}
.el-icon-check{
    position: absolute;
    background: hotpink;
    color: green;
    font-size: 24px;
    left: 0;
    top: 0;
}
</style>